<template>
  <div class="myInputNumber">
    <el-input-number :disabled="disabled"
                     :max="max"
                     :min="min"
                     @change="change(childModel)"
                     :controls-position="controlsPosition"
                     v-model.lazy="childModel"
    >
    </el-input-number>
  </div>
</template>

<script>

export default {
  name: 'myInputNumber',
  props: {
    // 当前组件绑定值
    model: {
      type: Number,
      require: true
    },
    // 设置计数器允许的最小值
    min: {
      type: Number,
      default () {
        return 1
      }
    },
    // 设置计数器允许的最大值
    max: {
      type: Number,
      default () {
        return 100
      }
    },
    // 是否禁用计数器
    disabled: {
      type: Boolean,
      default () {
        return false
      }
    },
    // 控制按钮位置
    controlsPosition: {
      type: String,
      default () {
        return 'right'
      }
    },
    // 当前组件change改变方法
    change: {
      type: Function,
      default (val) {

      }
    }
  },
  data () {
    return {
      childModel: this.model
    }
  },
  watch: {
    childModel: function (val) {
      this.$emit('update:model', val)
    },
    model (val) {
      if (val !== this.childModel) {
        this.childModel = val
      }
    }
  },
  methods: {}
}
</script>

<style lang="scss">
</style>
